<template>
	<view>
		<van-search @focus="goSearchPage" placeholder="请输入搜索关键词" />

		<swiper class="swiper" autoplay indicator-dots circular>
			<swiper-item v-for="(swiper,sidx) in swipers" @click="swiperClick(sidx)">
				<image :src="swiper.url"></image>
			</swiper-item>
		</swiper>
		<view class="adver">
			<image v-if="advers.length>0" :src="advers[0].url"></image>
		</view>
		<van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />

		<view class="center">
			<!-- 后期视情况做分页效果 -->
			<van-card v-for="(g,gi) in goods" :key="'goods'+gi" @click="goGoodsDetail(g._id)" :price="g.price"
				:desc="g.goods_desc" :title="g.name" :thumb="g.goods_thumb" :origin-price="g.pre_price">
				<template #tags>
					<view class="">
						<van-tag plain type="danger" v-for="gt in g.keywords.split(',')">{{gt}}</van-tag>
					</view>
				</template>
				<template #num>
					<view>库存 {{g.remain_count}}</view>
				</template>
				<template #footer>
					<van-tag plain type="primary">销量: {{g.month_sell_count}}/月</van-tag>
				</template>
			</van-card>
		</view>
		<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa',fontSize:'36upx', padding: '0 16px' }">
			热销商品
		</van-divider>
		<view class="goods-push">
			<view v-for="(adver,ai) in advers" class="goods">
				<image v-if="ai != 0" :src="adver.url"></image>
			</view>
		</view>
		<view class="cates">
			<view v-for="(cate,cidx) in categories" class="cate">
				<image :src="cate.url"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const homePage = uniCloud.importObject('home')
	export default {

		data() {
			return {
				swipers: [],
				categories: [],
				advers: [],
				goods: []
			}
		},
		onLoad() {
			this.getHomeData();
			this.getGoods()
		},
		onShow() {},
		methods: {
			getHomeData() {
				// 虽然咱们一个api响应速度慢了 但是节约api请求次数

				homePage.homeData().then(res => {
					this.swipers = res.banners
					this.advers = res.advers
					this.categories = res.categories
				})
			},

			getGoods(where = {}) {
				homePage.goods(where).then(res => {
					this.goods = res.data
				})
			},
			swiperClick(idx) {
				// uni.navigateTo({
				// 	url:this.swipers[idx].path
				// })
			},
			goSearchPage() {
				uni.navigateTo({
					url: '/pages/goods/search'
				})
			},
			goGoodsDetail(_id) {
				uni.navigateTo({
					url: '/pages/goods/detail?_id=' + _id
				});
			}
		}
	}
</script>

<style>
	.swiper {
		width: 100%;
		height: 750upx;
	}

	.swiper swiper-item {
		height: 100%;
	}

	.swiper swiper-item image {
		width: 100%;
		height: 100%;
	}

	.adver {
		width: 100%;
		height: 250upx;
	}

	.adver image {
		width: 100%;
		height: 100%;
	}

	.cates {
		width: 700upx;
		margin: 0 auto;
	}

	.cates .cate {
		margin: 25upx 0;
		width: 100%;
		height: 280upx;
	}

	.cates .cate image {
		width: 100%;
		height: 100%;
	}

	.goods-push {
		width: 700upx;
		margin: 0 auto;
	}

	.goods-push image {
		width: 700upx;
		height: 900upx;
	}
</style>
